<template>
  <view>
    <view>
      <view class="margin">
        <view class="bg-white padding btn" @click="toChart">
          阅读记录分析
        </view>
      </view>

      <view class="solid-bottom"></view>



      <view v-for="h in history" :key="h.id">
        <view class="flex flex-direction padding-sm">

          <view class="flex align-center">
            <view class="point"></view>
            <view class="text-sm text-grey">
              {{String(h.updated_at).substring(0,10) + " " + String(h.updateTime).substring(11,19)}}
            </view>
          </view>


          <view class="flex margin-top-sm">
            <view class="card">
              <index-article-card :article="h.formatArticle" :show-dianzan="false"></index-article-card>
            </view>

          </view>
        </view>
      </view>


    </view>


  </view>
</template>

<script>
import IndexArticleCard from "../../components/indexArticleCard/indexArticleCard";
import {dateFormat} from "../../util/TimeFormat";

export default {
  components: {IndexArticleCard},
  data() {
    return {
      history: []
    }
  },
  onShow() {
    this.getHistory()
  },
  methods: {
    getHistory() {
      this.$api.getArticleHistory().then(res => {
        for (const i in res) {
          let date = new Date(Date.parse(res[i].updated_at))
          console.log(date)
          res[i].updateTime = dateFormat("YYYY-mm-dd HH:MM:SS",date)
          // res[i].updateTime = `${date.getFullYear().toString()}-${(date.getMonth() + 1).toString()}-${date.getDate().toString()} ${date.getHours().toString()}:${date.getMinutes().toString()}:${date.getSeconds().toString()}`
        }
        this.history = res
        console.log(res)
      })
    },
    toChart(url) {
      uni.navigateTo({
        url:'./historyChart'
      })
    },
  }
}
</script>

<style lang="scss">

.btn{
  color: white;
  //background-position: right center;
  box-shadow: 8upx 10upx 30upx 0upx #B693FFD7;
  border-radius: 10upx;

  //box-shadow: 0 10upx 10upx rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background-size: 300% 300%;
  background-image: linear-gradient(to right, #895cf2 0%, #ffabf4 50%, #895cf2 100%);
}

.point {
  width: 20upx;
  height: 20upx;
  border-radius: 3upx;
  background: #4e6ef2;
  box-shadow: 5upx 10upx 16upx 0 rgba(78,111,242,.5);
  margin-right: 20upx;
}

.card {
  //box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}
</style>
